<template>
  <div class="home" v-loading="loading">
    <div class="swiperBox">
      <el-carousel :autoplay="true" :height="bannerHeight + 'px'">
        <el-carousel-item v-for="(item, index) in webImageList" :key="index">
          <img
            ref="bannerHeight"
            style="width: 100%"
            :src="item.url"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="solutionBox">
      <div class="solutionTitle" v-if="listAll.length > 0">
        {{ listAll[0].name }}
      </div>
      <div class="childMenuBox" v-if="listAll.length">
        <div
          @mouseenter="solutionMouseenter(item)"
          :class="{
            childMenuItem: true,
            solutioned: solutioned === item.id
          }"
          v-for="(item, index) of listAll[0].subMenuList.slice(0, 4)"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="solutionList">
        <div
          v-for="(item, index) of solutionArr"
          :key="index"
          class="solutionItem"
          @click="goSolution(item)"
        >
          <div class="imgBox">
            <img
              v-if="index == 0"
              src="../assets/img/setting0.png"
              alt=""
              srcset=""
            />
            <img
              v-if="index == 1"
              src="../assets/img/setting1.png"
              alt=""
              srcset=""
            />
            <img
              v-if="index == 2"
              src="../assets/img/setting2.png"
              alt=""
              srcset=""
            />
            <img
              v-if="index == 3"
              src="../assets/img/setting3.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="soItemTitle" style="font-weight: 600">
            {{ item.title }}
          </div>
          <div class="soItemContent">
            <p>
              {{ item.recap }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="overviewBox" v-if="overviewArr.length > 0">
      <div class="overviewTxt">
        <img
          v-if="overviewArr[0].image"
          @click="goOverview(overviewArr[0])"
          class="overviewImg"
          :src="overviewArr[0].image"
          alt=""
          srcset=""
        />
        <div
          class="solutionTitle"
          style="color: #fff"
          v-if="listAll.length > 0"
        >
          <span style="margin-right: 20px"> {{ listAll[2].name }}</span>
          <span
            @mouseenter="overviwMouseenter(item)"
            :class="{
              overviewMenu: true,
              overviewMenued: overviewMenued === item.id
            }"
            v-for="(item, index) of listAll[2].subMenuList.slice(0, 2)"
            :key="index"
          >
            {{ item.name }}
          </span>
        </div>
        <!-- <div
          class="soItemContent"
          @click="goOverview(overviewArr[0])"
          style="
            color: #fff;
            margin-top: 20px;
            font-size: 36px;
            font-weight: 600;
          "
        >
          {{ overviewArr[0].title }}
        </div> -->
        <div
          class="soItemContent"
          style="color: #fff; margin-top: 20px"
          @click="goOverview(overviewArr[0])"
        >
          <p style="font-size: 16px">
            {{ overviewArr[0].recap }}
          </p>
        </div>
      </div>
      <!-- <img class="overviewImg" src="" alt="" srcset="" /> -->
    </div>
    <div class="newsBox" v-if="newsArr.length > 0">
      <div class="solutionTitle" v-if="listAll.length > 0">
        {{ listAll[1].name }}
      </div>
      <div class="newsContent">
        <div class="newsLeft">
          <div class="newsFirstImg" style="margin-top: 20px">
            <img
              class="newsFirstImg"
              style="margin-top: 20px; width: 400px"
              :src="newsArr[0].image"
              alt=""
              srcset=""
            />
          </div>
          <div class="soItemContent" style="margin-top: 20px">
            {{ newsArr[0].title }}
          </div>
          <div class="newsItem" @click="goNews(newsArr[0])">
            <div style="width: 100px; text-align: center">
              <div style="font-size: 22px; width: 100%; text-align: left">
                {{ dayYear(newsArr[0].publishTime) }}
              </div>
              <div
                style="
                  font-size: 18px;
                  width: 100px;
                  text-align: left;
                  color: #767676;
                "
              >
                {{ dayDay(newsArr[0].publishTime) }}
              </div>
            </div>
            <div>
              <div
                class="newsItemContent"
                style="color: #767676; padding-right: 100px"
              >
                {{ newsArr[0].recap }}
              </div>
            </div>
          </div>
        </div>
        <!-- //剩余3个 -->
        <div class="newsright" style="margin-top: 20px">
          <div
            v-for="(item, index) of newsArr.slice(1, 4)"
            :key="index"
            class="newsItem"
            style="border-bottom: 1px solid #cdcdcd"
            @click="goNews(item)"
          >
            <div style="text-align: center">
              <div style="font-size: 22px; width: 100px; text-align: left">
                {{ dayYear(item.publishTime) }}
              </div>
              <div
                style="
                  font-size: 16px;
                  width: 100px;
                  text-align: left;
                  color: #767676;
                "
              >
                {{ dayDay(item.publishTime) }}
              </div>
            </div>
            <div>
              <div class="soItemContent" style="font-size: 18px">
                {{ item.title }}
              </div>
              <div class="newsItemContent" style="color: #767676">
                {{ item.recap }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  components: {},
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },

  data() {
    return {
      loading: true,
      webImageList: [],
      solution: [],
      bannerHeight: '',
      listAll: [],
      solutionArr: [],
      solutioned: '',
      overviewArr: [],
      overviewMenued: '',
      newsArr: [],
      newsed: ''
    }
  },

  created() {
    this.$http
      .all([
        this.$http.get('/companyWeb/menu/listAll'),
        this.$http.get('/companyWeb/webImage/list?type=2&state=1')
      ])
      .then(
        this.$http.spread((listAll, imgItem) => {
          this.listAll = listAll.data.obj.data
          console.log(listAll)
          this.loading = false
          // 获取解决方案内容liebiao
          setTimeout(() => {
            this.imgLoad()
            this.getSolutionData(listAll.data.obj.data[0].subMenuList[0].id)
            this.getoverviewData(listAll.data.obj.data[2].subMenuList[0].id)
            this.getnewsData()
            this.webImageList = imgItem.data.obj.data
          }, 100)
        })
      )
  },
  // updated: function () {
  //   this.$nextTick(function () {
  //     //  仅在整个视图都被重新渲染之后才会运行的代码
  //     this.imgLoad()
  //   })
  // },
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  mounted() {
    window.addEventListener(
      'resize',
      () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
        this.imgLoad()
      },
      true
    )
  },
  methods: {
    goSolution(item) {
      this.$router.push({
        name: 'solution',
        params: {
          subMenuId: item.subMenuId,
          id: item.id
        }
      })
    },
    goNews(item) {
      this.$router.push({
        name: 'news',
        params: { subMenuId: item.subMenuId, id: item.id }
      })
    },
    goOverview(item) {
      this.$router.push({
        name: 'overview',
        params: { subMenuId: item.subMenuId, id: item.id }
      })
    },
    // goDownLoad(item) {
    //   console.log(item)
    //   this.$router.push({
    //     path: 'downLoad',
    //     query: { subMenuId: item.subMenuId, id: item.id }
    //   })
    // },
    dayYear(item) {
      return this.$dayjs(item).format('YYYY-MM')
    },
    dayDay(item) {
      return this.$dayjs(item).format('MM-DD')
    },
    solutionMouseenter(item) {
      this.solutioned = item.id
      this.getSolutionData(item.id)
    },
    overviwMouseenter(item) {
      this.overviewMenued = item.id
      this.getoverviewData(item.id)
    },
    getnewsData() {
      this.newsed = this.$http
        .get(
          `/companyWeb/content/listConsumer?pageNo=0&pageSize=4&menuId=2&state=1`
        )
        .then((res) => {
          this.newsArr = res.data.obj.data
          console.log(this.newsArr)
        })
    },
    getoverviewData(subMenuId) {
      this.overviewMenued = subMenuId
      this.$http
        .get(
          `/companyWeb/content/listConsumer?pageNo=0&pageSize=1&subMenuId=${subMenuId}`
        )
        .then((res) => {
          this.overviewArr = res.data.obj.data
          console.log(this.solutionArr)
        })
    },
    getSolutionData(subMenuId) {
      this.solutioned = subMenuId
      this.$http
        .get(
          `/companyWeb/content/listConsumer?pageNo=0&pageSize=4&subMenuId=${subMenuId}`
        )
        .then((res) => {
          this.solutionArr = res.data.obj.data
          console.log(this.solutionArr)
        })
    },
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
      })
    }
  }
}
</script>
 <style lang="scss" scoped>
.solutioned {
  background: #dcdcdc !important;
  color: #333 !important;
}
.overviewMenued {
  border-bottom: 2px solid #1dac9a;
  color: #1dac9a !important;
  font-style: italic;
}
.overviewMenu {
  margin-right: 10px;
  font-size: 16px;
}
.childMenuBox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 100px;
}
.childMenuItem {
  position: relative;
  margin: 0 4px;
  width: 22%;
  text-align: center;
  background: #1896e1;
  line-height: 50px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 12px 0 #b7b4b4;
}
.checked {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40rpx;
  height: 40px;
}
.newsBox {
  width: 100%;
  padding: 50px 80px 150px 80px;
  box-sizing: border-box;
  background: #ffffff;
  .newsItemContent {
    // margin-top: 10px;
    color: #767676;
    font-size: 16px;
    padding-right: 40px;
    box-sizing: border-box;
  }
  .newsContent {
    display: flex;
    .newsItem {
      display: flex;
      padding: 30px 0;
      padding-right: 40px;
      box-sizing: border-box;
      // height: 140px;
    }
    .newsLeft {
      flex: 5;
      .newsFirstImg {
        width: 100%;
      }
    }
    .newsright {
      border-top: 1px solid #cdcdcd;
      flex: 4;
    }
  }
}
.overviewBox {
  width: 100%;
  padding: 50px 80px 150px 80px;
  box-sizing: border-box;
  background: #f0f0f0;
  .overviewTxt {
    width: 60%;
    padding: 40px 12% 40px 40px;
    box-sizing: border-box;
    height: 400px;
    background: #4674b6;
    position: relative;
    .overviewImg {
      position: absolute;
      top: 40px;
      left: 92%;
      width: 500px;
      // height: 240px;
      // background: red;
    }
  }
}
.solutionBox {
  width: 100%;
  padding: 50px 80px 150px 80px;
  box-sizing: border-box;
  .solutionList {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    .solutionItem {
      padding: 20px 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 #d1cece;
      height: 300px;
      width: 24%;
      display: flex;
      align-items: center;
      flex-direction: column;
      .soItemTitle {
        margin-top: 20px;
        color: #333;
        font-size: 16px;
      }
      .soItemContent {
        width: 100%;
        margin-top: 10px;
        color: #767676;
        font-size: 14px;
        white-space: normal;
      }
      .imgBox {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        border: 4px solid #f8621e;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
.solutionTitle {
  color: #333;
  font-size: 20px;
  font-weight: 800;
}
.home {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.swiperBox {
  width: 100%;
  margin: 0 auto;
}
</style>
